import { Flex, Image, Button, Modal, Input, message } from "antd";
import "./style.less"
import { useState } from 'react';
import imageData from "@/assets/img/缺失图片.png"
import { useSelector } from "react-redux";
import { doOperateForProduct } from "@/api/service/manageService"
import { useNavigate } from "react-router-dom";
const { TextArea } = Input;

export default function Header({ detail }) {
    const user = useSelector((state: any) => state.user.userInfo);
    const isAdmin = user.role.label === "admin"
    const [title, setTitle] = useState("")
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [txt, setTxt] = useState("")
    const navgitor = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();


    const showModal = (text: string) => {
        setTitle(text);
        setOpen(true);
    };

    const handleOk = () => {
        setConfirmLoading(true);
        // 准备进行提交备注
        doOperateForProduct({
            productID: detail.productID,
            operatPerson: detail.username || "admin123",
            status: title,
            comment: txt
        }).then(val => {
            messageApi.open({
                type: 'success',
                content: '操作成功！',
            }).then(() => {
                navgitor("/workbench");
            });
        }).catch(err => {

        })

        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 2000);
    };

    const handleCancel = () => {
        console.log('Clicked cancel button');
        setOpen(false);
    };


    const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        console.log('Change:', e.target.value);
        setTxt(e.target.value)
    };

    const sendReview = () => {
        // 发起审核
        doOperateForProduct({
            productID: detail.productID,
            operatPerson: detail.username||"xiaoer123",
            status: "发起审批",
            comment:"xiaoer123 发起了审核~~~~~~~",
        }).then(val => {
            messageApi.open({
                type: 'success',
                content: '操作成功！',
            }).then(() => {
                navgitor("/workbench");
            });
        }).catch(err => {

        })
    }

    const sendOnline=()=>{
        doOperateForProduct({
            productID: detail.productID,
            operatPerson: detail.username||"xiaoer123",
            status: "上线",
            comment:"xiaoer123 ����通过，上线��~~~~~~~",
        }).then(val => {
            messageApi.open({
                type: 'success',
                content: '操作成功！',
            }).then(() => {
                navgitor("/workbench");
            });
        }).catch(err => {

        })
    }
    return (
        <div className="product-detail">
            {contextHolder}
            <Flex style={{ height: 160 }} justify="space-between" align="center">
                <div className="header-left block">
                    <Flex justify="flex-start" align="center">
                        <div className="image-warp"><Image
                            width={120}
                            height={140}
                            src={detail.pic}
                            fallback={imageData}
                        /></div>
                        <div className="image-right">
                            <div className="product-name">{detail.name}</div>
                            <div className="product-creator">创建人:<span className="font">{detail.creator}</span></div>
                            <div className="product-id">商品ID:<span className="font">{detail.productID}</span></div>
                        </div>
                    </Flex>
                </div>
                <div className="header-right block">
                    <Flex vertical >
                        <div>状态:{detail.status}</div>
                        <div>
                            {isAdmin &&
                                <>
                                    <Button onClick={() => showModal("审批通过")} style={{ marginRight: 5 }} disabled={detail.status !== 'reviewing'} size="small" type="primary">审批通过</Button>
                                    <Button onClick={() => showModal("审批驳回")} style={{ marginRight: 5 }} disabled={detail.status !== 'reviewing'} size="small" danger type="primary">审批驳回</Button>
                                </>
                            }
                            {isAdmin ||
                                <>
                                    <Button style={{ marginRight: 5 }} size="small" disabled={detail.status === "reviewing"} type="primary">编辑</Button>
                                    <Button onClick={() => sendReview()} style={{ marginRight: 5 }} size="small" disabled={detail.status === "reviewing"} type="primary">发起审批</Button>
                                    <Button onClick={()=>sendOnline()} style={{ marginRight: 5 }} size="small" disabled={detail.status === "reviewing" || detail.status !== "success"} type="primary" danger>上线</Button>
                                </>
                            }
                        </div>
                    </Flex>
                </div>
            </Flex>
            {/* 弹出框！！！ */}
            <Modal
                title={"添加审核备注信息" + "---" + title}
                open={open}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        返回
                    </Button>,
                    <Button key="submit" type="primary" loading={confirmLoading} onClick={handleOk}>
                        提交
                    </Button>,
                ]}
            >
                <TextArea
                    showCount
                    maxLength={100}
                    onChange={onChange}
                    placeholder="审核备注"
                    style={{ height: 120, resize: 'none', marginBottom: 20, marginTop: 10 }}
                />
            </Modal>
        </div>
    )
}